<template>
  <div class="homePageInfo">
    <h1 class="mb-3"></h1>
    <el-form class="w80">
      <div class="hd fs16 bold mb-2">
        <span>广播</span>
        <el-button class="center" type="primary" size="mini" @click="saveSysInfo('broadcast', broadcast)">保存</el-button>
      </div>
      <el-form-item label=" " prop="broadcast">
        <Tinymce ref="editor" v-model="broadcast" :height="150" />
      </el-form-item>
    </el-form>
    <el-form class="w80">
      <div class="hd fs16 bold mb-2" d-flex>
        公告
        <el-button class="center" type="primary" size="mini" @click="saveSysInfo('notice', notice)">保存</el-button>
      </div>
      <el-form-item label=" " prop="notice">
        <Tinymce ref="editor" v-model="notice" :height="150" />
      </el-form-item>
    </el-form>
    <el-form class="w80">
      <div class="hd fs16 bold mb-2" d-flex>
        充值说明
        <el-button class="center" type="primary" size="mini" @click="saveSysInfo('rechargeDesc', rechargeDesc)"
          >保存</el-button
        >
      </div>
      <el-form-item label=" " prop="rechargeDesc">
        <Tinymce ref="editor" v-model="rechargeDesc" :height="150" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";

export default {
  props: ["id"],
  components: {
    Tinymce,
  },
  data() {
    return {
      broadcast: "",
      notice: "",
      rechargeDesc: "",
    };
  },
  beforeCreate() {
    // 启用富文本编辑
    this.$store.commit("ActiveEditor");
  },
  created() {
    this.fetch();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    async fetch() {
      const { data: res } = await this.$http.post("findSysInfoByPage");
      // console.log(res, "综合");
      const keys = ["broadcast", "notice", "rechargeDesc"];
      res.data.result.forEach((item) => {
        keys.forEach((key) => {
          if (item.label_key == key) {
            this[key] = item.label_content;
          }
        });
      });
    },
    async saveSysInfo(key, content) {
      this.$confirm(`确定要保存吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const formData = new FormData();
          formData.append("label_key", key);
          formData.append("label_content", content);
          const { data: res } = await this.$http.post("saveSysInfo", formData);
          // console.log(res, 333);
          if (res.code != "0") return this.$message("保存广播失败");
          this.$message.success("保存成功");
          this[content] = res.data.label_content;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
.homePageInfo {
  padding-left: 50px;
  .hd {
    position: relative;
  }
}
</style>
